import React, { useState } from 'react';
import { Tabs, Button } from 'antd';
import './sourcematerial.css'; 
import img from "../../assets/simg/img.png"; // 导入图片资源
import ma from "../../assets/simg/er.png"; // 导入二维码图片资源

//UploadComponent 是一个React函数组件，它接收一组props作为参数，用于创建一个上传文件的界面。

const UploadComponent: React.FC<{
  onUpload: (file: File) => void;//一个函数，当文件被选中时调用，接收一个 File 对象作为参数。
  title: string;//表示上传按钮的文本。
  accept: string;//表示文件输入元素接受的文件类型。
  id: string;//用于给隐藏的文件输入元素设置ID
  placeholder: string;//用于显示在输入框下方的提示信息。
}> = ({ onUpload, title, accept, id, placeholder }) => (
  <div className='ImageUp'>
    <img src={img} alt="" id='img' />
    <div className='ImageUp_right'>
      <h3>{title}</h3>
      <p>{placeholder}</p>
   {/* 创建了一个隐藏的文件输入元素，当用户通过上传按钮触发它时，可以打开文件选择对话框，选择文件后，所选文件的第一个文件会被传递给 onUpload 函数进行处理。 */}
      <input type="file" accept={accept} onChange={(e) => e.target.files && onUpload(e.target.files[0])} style={{ display: 'none' }} id={id} />
      {/* 当用户点击上传按钮时，会触发隐藏的文件输入元素的点击事件，从而允许用户选择文件。 */}
      <Button onClick={() => document.getElementById(id)?.click()}>{title}</Button>
      <p>微信“扫一扫”上传手机{title}</p>
      <img src={ma} alt="" />
    </div>
  </div>
);

// 主组件，用于展示和管理素材
const SourceMaterial: React.FC = () => {
  // 状态定义
  const [showUploadSection, setShowUploadSection] = useState(false); // 控制上传区域的显示
  const [uploadedFiles, setUploadedFiles] = useState<{ name: string; url: string; type: string }[]>([]); // 存储已上传的文件
  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set()); // 存储被选中的文件
  const [isSelecting, setIsSelecting] = useState(false); // 控制是否处于选择模式

  //切换上传区域的显示状态。
  const toggleUploadSection = () => {
    setShowUploadSection(!showUploadSection);
  };

  // 处理文件上传，创建一个对象 URL 并更新 uploadedFiles 状态。
  const handleUpload = (file: File) => {
    const fileURL = URL.createObjectURL(file);
    setUploadedFiles(prev => [...prev, { name: file.name, url: fileURL, type: file.type.split('/')[0] }]);
    setShowUploadSection(false); // 上传后关闭上传区域
  };

  //处理文件选择，更新 selectedFiles 状态。
  const handleSelectFile = (fileName: string) => {
    setSelectedFiles(prev => {
      const newSelected = new Set(prev);
      if (newSelected.has(fileName)) {
        newSelected.delete(fileName);
      } else {
        newSelected.add(fileName);
      }
      return newSelected;
    });
  };

  //删除选中的文件，并清空 selectedFiles 状态。
  const handleDeleteSelected = () => {
    setUploadedFiles(prev => prev.filter(file => !selectedFiles.has(file.name)));
    setSelectedFiles(new Set()); // 清空选中文件
    setIsSelecting(false); // 退出选择模式
  };

  // 全选或取消全选文件。
  const handleSelectAll = () => {
    if (selectedFiles.size === uploadedFiles.length) {
      setSelectedFiles(new Set()); // 如果已全选，则取消选择
    } else {
      setSelectedFiles(new Set(uploadedFiles.map(file => file.name))); // 全选
    }
  };

  //renderUploadedFiles 函数根据文件类型过滤并渲染已上传的文件。
  const renderUploadedFiles = (type: string) => {
    const filteredFiles = uploadedFiles.filter(file => file.type === type);
    return filteredFiles.length ? (
      <div className='uploaded-files'>
        {/* 使用 map 方法遍历 filteredFiles 数组，为每个文件创建一个预览元素。 */}
        {filteredFiles.map(file => (
          // 为每个文件创建一个容器，key 属性用于帮助 React 识别哪些项改变了，比如被添加或删除。
          <div key={file.name} className="file-preview-container">
            {/* 如果 isSelecting 为 true，则渲染一个复选框，允许用户选择文件。复选框的状态（选中或未选中）由 selectedFiles.has(file.name) 决定，并且当用户点击复选框时，会调用 handleSelectFile(file.name) 函数。 */}
            {isSelecting && <input type="checkbox" checked={selectedFiles.has(file.name)} onChange={() => handleSelectFile(file.name)} />}
            {type === 'image' ? <img src={file.url} alt={file.name} className="file-preview" /> : null}
            {type === 'video' ? <video src={file.url} controls className="file-preview" /> : null}
            {type === 'audio' ? <audio src={file.url} controls /> : null}
            <p style={{ color: 'white' }}>{file.name}</p>
          </div>
        ))}
      </div>
    ) : <p>没有上传任何{type === 'image' ? '图片' : type === 'video' ? '视频' : '音乐'}。</p>;
  };

  // 渲染组件
  return (
    <div className='sourcematerial'>
 {/* Tabs组件，用于在不同的素材类型之间切换 */}
      <Tabs defaultActiveKey="1" items={[
        {
          key: '1', label: '图片', children: renderUploadedFiles('image')
        },
        {
          key: '2', label: '视频', children: renderUploadedFiles('video')
        },
        {
          key: '3', label: '音乐', children: renderUploadedFiles('audio')
        },
      ]} onChange={key => console.log(key)} />

      {/* 上传素材和批量删除按钮 */}
      <div className='button_up'>
        <Button onClick={toggleUploadSection}>上传素材</Button>
        {/* 根据是否处于选择模式显示不同的按钮文本 */}
        <Button onClick={() => setIsSelecting(!isSelecting)}>
          {isSelecting ? "取消选择" : "批量删除"}
        </Button>
        {/* 如果处于选择模式，显示全选和确认删除按钮 */}
        {isSelecting && (
          <>
            <Button onClick={handleSelectAll}>
              {selectedFiles.size === uploadedFiles.length ? "取消全选" : "全选"}
            </Button>
            {/* 确认删除按钮，如果没有任何文件被选中则禁用 */}
            <Button onClick={handleDeleteSelected} disabled={selectedFiles.size === 0}>确认删除</Button>
          </>
        )}
      </div>

      {/* 上传区域，根据showUploadSection状态显示或隐藏 */}
      {showUploadSection && (
        <div className='upload-section'>
          {/* 上传区域头部，包含标题和关闭按钮 */}
          <div className='upload-header'>
            <h3>上传素材</h3>
            <Button type='link' onClick={toggleUploadSection} style={{ float: 'right' }}>关闭</Button>
          </div>

          {/* 上传按钮组 */}
          <div className='upload-buttons'>
            <UploadComponent onUpload={handleUpload} title="上传图片" accept="image/*" id="imageUpload" placeholder="支持jpg、png、gif、svg， 不超过5M，单次不超过20张" />
            <UploadComponent onUpload={handleUpload} title="上传视频" accept="video/*" id="videoUpload" placeholder="支持mp4、mov，大小不超过200M，单次只能上传1个" />
            <UploadComponent onUpload={handleUpload} title="上传音乐" accept="audio/*" id="musicUpload" placeholder="支持mp3，大小不超过10M,单次只能上传1个" />
          </div>
        </div>
      )}
    </div>
  );
};


export default SourceMaterial;

  